<template>
  <div id="app">
    <navigation-bar/>
    <main class="app-main">
      <router-view/>
    </main>
  </div>
</template>
<script>
import NavigationBar from "@/components/NavigationBar.vue";
export default {
  name: 'App',
  components: {
    NavigationBar,
  }
}
</script>

<style>
#app {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: var(--bg-secondary, #f4f4f4);
}

navigation-bar {
  width: 100%;
  position: sticky;
  top: 0;
  z-index: 1000;
  background: var(--bg-primary, #ffffff);
  box-shadow: var(--shadow-sm, 0 2px 4px rgba(0, 0, 0, 0.08));
}

.app-main {
  flex: 1;
  width: 100%;
  min-height: calc(100vh - 60px);
}

/* 确保路由视图内容正确显示 */
.app-main > * {
  width: 100%;
}
</style>
